<template>
    <div>
      <div class="mess-hed">
        <img @click="bac333()" :src="'./static/lyl/back.png'" alt="">
        <span @click="tiao(item,index)" :class="{active:cur==index}" v-for="(item,index) in data" :key="index">{{item.txt}} <span v-if="cur==index"></span></span>
        <span></span>
      </div>

      <router-view></router-view>
    </div>
</template>

<script>
    export default {
      name: "index",
      data(){
        return {
          data:[
            {path:'/news',txt:'消息'},
            {path:'/inform',txt:'通知'}
          ],
          cur:0
        }
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        tiao(int,i){
          this.cur = i;
          this.$router.push(int.path);
        },
        bac333(){
          this.$router.push('/personal');
        }
      }
    }
</script>

<style scoped>
  .mess-hed{
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    border-bottom: 2px solid #dcdcdc;
  }
  .mess-hed img{
    width: 26px;
    height: 40px;
  }
  .mess-hed span{
    font-size: 36px;
    position: relative;
  }
  .mess-hed span span{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -20px;
    border: 2px solid #e98345;
  }
  .mess-hed .active{
    color: #e98345;
  }
</style>
